<template>
	<view>
		<view class="index_info">
			<!-- banner Start -->
			<view class="swiper-back">
				<banner :swiperImg="swiperImg"></banner>
			</view>
			<!-- banner End -->
			
			<!-- 公告栏 Start -->
			<!-- <view class="jn-com-part">
				<uniNoticeBar scrollable="true" single="true" text="[报警] 09:15 奉化学楼101 CO2 超标" showIcon= true></uniNoticeBar>
			</view> -->
			
			<!-- 公告栏 End -->
			<scroll-view id="scrollview" scroll-y="true" :scroll-with-animation="true" scroll-top="0">
			
			<!-- 常用应用Start -->
				
				<view class="jn-com-part">
					<view class="jn-com-main">
						<!-- <view class="common">
							<view>
								<text>常用应用</text>
							</view>
							<view><label class="iconfont icon-bianji3 font-size22 color-9A9A9A" /></view>
						</view> -->
						
						<view class="uni-grid">
							<view class="grid-9">
								<view class="uni-grid-9 padding-bottom30">
									<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in comflow" :key="index" @tap="deRoute(item)">
										<view class="uni-grid-9-ico" :style="{'background':item.iconBackground|| '#008cff'}">
											<view class="icon-box-lin">
												<label class="font-size60" :class="item.icon"  style="color: #FFFFFF;"/>
											</view>
										</view>
										<text class="uni-grid-9-text" :class="item.fullName.length>5?'overflow-text':''">{{item.fullName}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 常用应用 End -->
				
				<view class="jn-com-part">
					<view class="jn-com-main">
						<view class="common">
							<view><text>最新通知</text></view>
						</view>
						<view class="background-colorFFF  margin-bottom-10">
							<view class="signcontract " :class="{'signcontracts':index!=contractlist.length-1}" v-for="(item,index) in contractlist"
							 :key="index">
								<view class="sign_text"><text class="ladot"></text> {{item.text}}</view>
								<view class="sign_date"> {{item.time}}</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="jn-com-part">
					<view class="jn-com-main">
						<view class="common">
							<view><text>热门研学</text></view>
						</view>
						<view class="background-colorFFF  margin-bottom-10">
							<view class="signcontract " :class="{'signcontracts':index!=pickerList.length-1}" v-for="(item,index) in pickerList"
							 :key="index">
								<view class="sign_text"><text class="ladot"></text> {{item.text}}</view>
								<view class="sign_date"> {{item.time}}</view>
							</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
		</view>
		<!-- <Tabar ref="Tabar"></Tabar> -->
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	import helper from '@/common/js/helper.js'
	import config from '@/common/js/config.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	import banner from './banner/banner.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	// import Tabar from "@/components/Tabar/Tabar.vue"
	let _self;
	let canvasObj  = null;

	export default {
		components: {
			wPicker,
			banner,
			uniNoticeBar,
			// Tabar
		},
		data() {
			return {
				current:0,
				notifys: [],
				comflow: [ {
							F_Id: "5f1a1319c3724f1eb1954e84d7753c8c",
							icon: "ym-custom icon-ym icon-ym-generator-nature",
							fullName: "资讯",
							F_UrlAddress: "/pages/apply/apply/lims020403/index"
							}
							,{
							F_Id: "5f1a1319c3724f1eb1954e84d7753c8c",
							icon: "icon-ym icon-ym-generator-rich-text",
							fullName: "课程",
							F_UrlAddress: "/pages/apply/apply/lims020402/index"
							},
							{
							F_Id: "5f8a4c3ff8794090b56f878be2946dd9",
							icon: "ym-custom  ym-custom-webcam",
							fullName: "基地",
							F_UrlAddress: "/pages/apply/apply/lims020401/index"
							},
							{
							F_Id: "5f8a4c3ff8794090b56f878be2946dd9",
							icon: "ym-custom ym-custom-store",
							fullName: "机构",
							F_UrlAddress: "/pages/apply/apply/lims020400/index"
							}],
				showDatal: false,
				timeStamp: 0,
				
				
				/* 消息通知 */
				contractlist: [{
						time: "03-05",
						text: "闵行春申小学-上海博物馆研学"
					},
					{
						time: "03-06",
						text: "闵行莘城学校-中共一大会址"
					}
				],
								
				pickerList: [{
						time: "历史",
						text: "上海博物馆研学"
					},
					{
						time: "历史",
						text: "中共一大会址"
					}],
					
				mode: '',
				isSearchShow: false,
				Briefingdate: '当天',
				
				/* bannerData */
				swiperImg: [{
						homeUrl: 'http://180.166.193.6:90/images/study/index1.png',//require('../../static/image/index1.png'),//config.Resources.banner.home1Url,
					},
					{
						homeUrl: 'http://180.166.193.6:90/images/study/index2.png',//require('../../static/image/index2.png'),//config.Resources.banner.home3Url,
					},
					{
						homeUrl: 'http://180.166.193.6:90/images/study/index3.png',//require('../../static/image/index3.png'),//config.Resources.banner.home2Url,
					},
					{
						homeUrl: 'http://180.166.193.6:90/images/study/dindex4.png',//require('../../static/image/index4.png'),//config.Resources.banner.home2Url,
					}
				],

			}
		},
		onLoad() {
			console.log('首页-用户:'+uni.getStorageSync('userid'));
			
			_self = this;
			this.cWidth = uni.upx2px(730);
			this.cHeight = uni.upx2px(500);

		},
		created() {
			console.log('create')
		},
		methods: {
			   /* 点击跳转 */
			   deRoute(e) {
					console.log(e)
					uni.setStorage({
						key:"title",
						data:e
					})
					setTimeout(function () {
						uni.navigateTo({
							url:e.F_UrlAddress,
							success: function(res) {
							   
							},
							fail: (err) => {
								helper.msg("暂无此页面")
							}
							
						})
						uni.hideLoading();
						/* 清除汇报页缓存 */
						uni.removeStorageSync('TabCur3')
					}, 300);
			},
			
		}
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}

	swiper {
		height: 380rpx;
		width: 95% !important;
		margin: 0 auto;
		border-radius: 20rpx;
		css-webkit-appearance: none;
		overflow: hidden;
	}

	/* #ifdef MP-ALIPAY */
	.swiper-image {
		width: 100% !important;
		height: 380upx !important;
	}

	/* #endif */

	.dateData {
		display: flex;
		align-items: center;
		position: relative;
		white-space: nowrap;
		font-size: 32rpx;
	}

	.dataList {
		background: #FFFFFF;
		z-index: 99;
		padding: 20rpx 40rpx 0 40rpx;
		box-shadow: 0 0 16rpx #9A9A9A;
		position: absolute;
		top: 66rpx;
		right: 0rpx;
	}

	.dataList::after {
		content: "";
		position: absolute;
		top: -34rpx;
		left: 80rpx;
		height: 0;
		width: 0;
		border: 20rpx solid;
		border-color: transparent transparent white transparent;
	}

	.dataitem {
		white-space: nowrap;
		margin-bottom: 20rpx;
		font-size: 32rpx;
	}

	.swiper-back {
		background: #3281FF !important;
		/* background: linear-gradient(to bottom, #4869EE 70%, #f0f2f6 30%) !important; */
		position: relative;
		height: calc(280rpx + 88rpx);
		margin-bottom: 80upx;
		
	}

	swiper-item {
		display: flex;
		align-items: center;
		border-radius: 20upx;
		overflow: hidden;
	}

	.swiper-banner image {
		width: 100%;
		height: 100%;
	}

	.bannerDots {
		width: 80rpx;
		height: 16rpx;
		display: flex;
		position: absolute;
		bottom: -80rpx;
		left: 50%;
		transform: translate(-50%);
		align-items: center;
		justify-content: space-between;
	}

	.bannerDots .banner-dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 5rpx;
		background: #EAEAEA;
	}

	.bannerDots .banner-dot.active {
		width: 26rpx;
		height: 10rpx;
		background: #3281FF;
	}

	.proclamation {
		width: 100%;
		overflow: hidden;
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}

	.proclamation-hint {
		width: 95%;
		height: 70rpx;
		display: flex;
		align-items: center;
		padding-left: 20upx;
		flex-wrap: nowrap;
	}

	.proclamation-hint .iconfont {
		font-size: 44rpx !important;
		margin-left: 8rpx;
	}

	.proclamation-center {
		width: 83%;
		padding-left: 20upx;
		font-size: 24upx;
		color: #9A9A9A;
	}

	.proclamation-right {
		padding-left: 7upx;
		width: 7%;
	}

	.uni-grid-6 {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		color: #555555;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}

	.uni-grid-6-item {
		width: 33.3%;
		display: flex;
		margin-bottom: 15rpx;
		margin-top: 15rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;
		/* border-top: 1upx solid #E6E6E6; */
		line-height: 52upx;
	}

	.uni-grid-7-item {
		padding: 20rpx 0;
		width: 50%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 40rpx;
	}

	.item7-num {
		font-size: 24rpx;
		color: #949ebc;
	}

	.item7-num>text {
		font-size: 32rpx;
		color: #252B3A;
		font-weight: 600;
	}

	.item7-intro {
		font-size: 24rpx;
		color: #999999;
	}

	.item7-icon {
		margin: 0 25rpx 0 25rpx;
		color: #ffffff;
		font-size: 38rpx;
		width: 66upx;
		margin-right: 30rpx;
		height: 66upx;
		background-color: #3281FF;
		text-align: center;
		line-height: 66upx;
		border-radius: 50%;
	}

	.uni-grid-6-text {
		width: 50%;
		display: flex;
		flex-direction: column;
		margin: 5upx 0;
	}

	.signcontract {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;
		color: #555555;
		position: relative;
	}

	.signcontracts::after {
		content: "";
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		width: 120%;
		left: 0;
		height: 1px;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.sign_text {
		display: flex;
		align-items: center;
	}

	.swiper-notify {
		height: 56upx;
		width: 100%;
		overflow: hidden;
	}

	.sign_date {
		line-height: 80rpx;
	}

	.common text {
		vertical-align: middle;
		font-size: 36upx;
		font-weight: 500;
		color: #3a3a3a;
	}
	.common::after {
	    content: "";
	    position: absolute;
	    z-index: 10;
	    right: 0;
	    bottom: 0;
	    left: 0px;
	    height: 0px;
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
	
	/* 图标通用样式 */
	.qiun-charts {
		width: 100%;
		height: 500upx;
		/* padding: 16rpx 0; */
		background-color: #FFFFFF;
	}

	.charts {
		width: 99%;
		height: 500upx;
		margin: 0 auto;
		background-color: #FFFFFF;
	}
	.qiun-bg-white {
		background: #FFFFFF;
	}
	
	.qiun-common-mt {
		margin-top: 10upx;
	}
	.overflow-notice {
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
